<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项 - 嘀嗒</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script>
        tailwind.config = {
            // darkMode: 'class', // Disable dark mode by default
            theme: {
                extend: {
                    colors: {
                        'primary': '#10B981',
                        'primary-focus': '#059669',
                        'secondary': '#6366F1',
                        'accent': '#EC4899',
                        'base-100-light': '#FFFFFF',
                        'base-content-light': '#1F2937',
                        'neutral-light': '#F3F4F6', // gray-100 for card backgrounds
                        'text-muted-light': '#6B7280', // gray-500
                        'border-light': '#E5E7EB', // gray-200 for borders
                        'todo-item-bg-light': '#FFFFFF', // white for todo items, with border
                        'filter-button-bg-light': '#E5E7EB', // gray-200 for filter buttons
                        'filter-button-text-light': '#374151', // gray-700 for filter button text
                        'filter-button-active-bg-light': '#10B981', // primary for active filter
                        'filter-button-active-text-light': '#FFFFFF' // white for active filter text
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background-color: #FFFFFF; /* base-100-light */
            color: #1F2937; /* base-content-light */
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        .todo-item {
            background-color: #FFFFFF; /* todo-item-bg-light */
            border: 1px solid #E5E7EB; /* border-light */
        }
        .todo-item.completed span {
            text-decoration: line-through;
            color: #6B7280; /* text-muted-light */
        }
        .todo-item.completed .fa-circle-check {
            color: #10B981; /* primary color */
        }
        .todo-item.pending .fa-circle {
            color: #6B7280; /* text-muted-light */
        }
        .bottom-nav {
            border-top: 1px solid #E5E7EB; /* border-light */
        }
        .nav-item.active i, .nav-item.active span {
            color: #10B981; /* primary color */
        }
        .filter-button {
            background-color: #E5E7EB; /* filter-button-bg-light */
            color: #374151; /* filter-button-text-light */
        }
        .filter-button:hover {
            background-color: #D1D5DB; /* gray-300 */
        }
        .filter-button.active {
            background-color: #10B981; /* filter-button-active-bg-light */
            color: #FFFFFF; /* filter-button-active-text-light */
        }
    </style>
</head>
<body class="antialiased flex flex-col bg-base-100-light text-base-content-light">

    <header class="p-4 sticky top-0 bg-base-100-light z-10 shadow-sm border-b border-border-light">
        <div class="flex justify-between items-center">
            <h1 class="text-xl font-semibold text-base-content-light">待办事项</h1>
            <div>
                <button class="text-text-muted-light hover:text-primary">
                    <i class="fas fa-filter"></i>
                </button>
                <button class="ml-3 text-text-muted-light hover:text-primary" onclick="document.location.href='settings.html'">
                    <i class="fas fa-cog"></i>
                </button>
            </div>
        </div>
        <div class="mt-3 flex space-x-2">
            <button class="filter-button active flex-1 text-sm py-2 px-3 rounded-md transition">今日</button>
            <button class="filter-button flex-1 text-sm py-2 px-3 rounded-md transition">全部</button>
            <button class="filter-button flex-1 text-sm py-2 px-3 rounded-md transition">已完成</button>
        </div>
    </header>

    <main class="flex-grow p-4 overflow-y-auto bg-neutral-light">
        <div class="space-y-3">
            <!-- Todo Item 1: Pending, Important -->
            <div class="todo-item pending p-4 rounded-lg flex items-center justify-between shadow">
                <div class="flex items-center">
                    <button class="text-xl mr-3 text-text-muted-light hover:text-primary">
                        <i class="far fa-circle"></i>
                    </button>
                    <span class="font-medium text-base-content-light">回复周五产品会议邮件</span>
                </div>
                <button class="text-yellow-400 hover:text-yellow-300">
                    <i class="fas fa-star"></i>
                </button>
            </div>

            <!-- Todo Item 2: Completed -->
            <div class="todo-item completed p-4 rounded-lg flex items-center justify-between shadow">
                <div class="flex items-center">
                    <button class="text-xl mr-3">
                        <i class="fas fa-circle-check"></i>
                    </button>
                    <span class="text-base-content-light">购买下午茶的咖啡豆</span>
                </div>
                <button class="text-text-muted-light hover:text-gray-400">
                    <i class="far fa-star"></i>
                </button>
            </div>

            <!-- Todo Item 3: Pending -->
            <div class="todo-item pending p-4 rounded-lg flex items-center justify-between shadow">
                <div class="flex items-center">
                    <button class="text-xl mr-3 text-text-muted-light hover:text-primary">
                        <i class="far fa-circle"></i>
                    </button>
                    <span class="font-medium text-base-content-light">准备明天项目演示PPT</span>
                </div>
                <button class="text-text-muted-light hover:text-yellow-300">
                    <i class="far fa-star"></i>
                </button>
            </div>
            
            <!-- Todo Item 4: Pending with due date -->
            <div class="todo-item pending p-4 rounded-lg flex items-start justify-between shadow">
                <div class="flex items-start">
                    <button class="text-xl mr-3 text-text-muted-light hover:text-primary mt-1">
                        <i class="far fa-circle"></i>
                    </button>
                    <div>
                        <span class="font-medium text-base-content-light">预定下周出差的机票和酒店</span>
                        <p class="text-xs text-red-500"><i class="fas fa-calendar-alt mr-1"></i>截止: 明天 18:00</p>
                    </div>
                </div>
                <button class="text-text-muted-light hover:text-yellow-300">
                    <i class="far fa-star"></i>
                </button>
            </div>
            <!-- Image from Pexels: https://www.pexels.com/photo/person-writing-on-notebook-4145354/ -->
            <img src="https://images.pexels.com/photos/4145354/pexels-photo-4145354.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Notebook" class="w-full h-32 object-cover rounded-lg mt-4 opacity-75">
        </div>

        <div class="fixed bottom-16 right-4 z-20">
            <button onclick="document.location.href='todo_create.html'" class="bg-secondary hover:bg-indigo-600 text-white font-bold w-14 h-14 rounded-full flex items-center justify-center shadow-lg">
                <i class="fas fa-plus text-xl"></i>
            </button>
        </div>
    </main>

    <nav class="bottom-nav bg-base-100-light p-3 flex justify-around items-center sticky bottom-0 z-10 border-t border-border-light">
        <a href="home_habits.html" class="nav-item flex flex-col items-center text-text-muted-light hover:text-primary">
            <i class="fas fa-check-double text-xl"></i>
            <span class="text-xs mt-1">习惯</span>
        </a>
        <a href="home_todos.html" class="nav-item active flex flex-col items-center text-text-muted-light hover:text-primary">
            <i class="fas fa-list-ul text-xl"></i>
            <span class="text-xs mt-1">待办</span>
        </a>
        <a href="home_finance.html" class="nav-item flex flex-col items-center text-text-muted-light hover:text-primary">
            <i class="fas fa-wallet text-xl"></i>
            <span class="text-xs mt-1">财务</span>
        </a>
        <a href="home_stats.html" class="nav-item flex flex-col items-center text-text-muted-light hover:text-primary">
            <i class="fas fa-chart-line text-xl"></i>
            <span class="text-xs mt-1">统计</span>
        </a>
    </nav>

</body>
</html>